<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3Dbanner旋转</title>
    <style type="text/css" id="css">
        *{
            margin: 0px;
            padding: 0px;
        }
        #wrap{
            width: 800px;
            height: 360px;
            margin: 100px auto;
        }
        #pic{
            width: 100%;
            height: 360px;
            perspective: 1500px;/*景深*/
        }
        #pic ul li{
            position: relative;
            list-style: none;
            box-sizing: border-box;/*怪异盒模型*/
            float: left;
            /*width: 200px;*/
            height: 360px;
            transform-style: preserve-3d;/*构建3d场景*/
            transform: translateZ(-180px);
        }
        #pic ul li div{
            /*width: 200px;*/
            height: 360px;
            position: absolute;
        }
        #pic ul li div:nth-child(1){
            top:-360px;
            transform-origin:bottom;/*元素旋转轴心*/
            transform:translateZ(180px) rotateX(90deg);/*元素沿着X轴转*/
            background-image: url(images/1.png);
        }
        #pic ul li div:nth-child(2){
            top: 360px;
            transform-origin:top;/*元素旋转轴心*/
            transform:translateZ(180px) rotateX(-90deg);/*元素沿着X轴转*/
            background-image: url(images/2.png);

        }
        #pic ul li div:nth-child(3){
            transform: translateZ(180px);
            background-image: url(images/3.png);

        }
        #pic ul li div:nth-child(4){
            transform: translateZ(-180px);/*向后推进去*/
            background-image: url(images/4.png);

        }
        #tab{
            width: 150px;
            height: 20px;
            float: right;
            margin-top: -40px;
            position: relative;
            z-index: 2;
            cursor: pointer;
        }
        #tab li{
            list-style: none;
            display: block;
            width: 20px;
            height: 20px;
            float: left;
            background-color: #666;
            border-radius: 20px;
            text-align: center;
            line-height: 20px;
            margin-right: 10px;
        }
        #tab li:hover{
            background-color: #fff;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="pic">
        <ul>
        </ul>
    </div>
    <div id="tab">
        <ol>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>
</div>
</body>
<script type="text/javascript">
    var oUl = document.getElementsByTagName("ul")[0],
        oCss = document.getElementById("css"),
        tabLi = document.querySelectorAll("#tab li");

    Array.prototype.forEach.call(tabLi,function(el,index,self){
        el.onclick = function(){
            oCss.innerHTML += "#pic ul li{transform:" +
                "translateZ(-180px) rotateX("+-90*index+"deg)}";
        }
    });

    play(80);

    function play(num){
        var width = 800/num,//单个li的宽度
            uHtml = '',
            pHtml = '',
            zHtml = '',
            z=0,
            tHtml = '';
        for(var i=0;i<num;i++){
            if(i>num/2){
                z--;
                zHtml += "#pic ul li:nth-child("+(i+1)+"){z-index:"+z+"}";
            }
            uHtml+=
                "<li><div></div><div></div><div></div><div></div></li>";
            pHtml += "#pic ul li:nth-child("+(i+1)+") div{background-position:"+-width*i+"px;}";
            tHtml += "#pic ul li:nth-child("+(i+1)+"){transition:1s "+i*0.01+"s}";
        }
        oUl.innerHTML = uHtml;
        oCss.innerHTML += tHtml+zHtml+pHtml + "#pic li,#pic div{width:"+width+"px}";

    }
</script>

</html>